<template>
  <div class="item-footer">
    <div class="item-footer__like">
      <el-tooltip
        content="点赞"
        placement="top"
        :offset="6"
        :open-delay="300"
      >
        <svg-icon
          icon-class="like"
          class="mr-10 cursor hover-opacity"
          :class="item.like_status === 'like' ? 'active' : ''"
          @click="handleLikeButton('like')"
        />
        <template slot="content">
          <div class="tooltip-content">点赞</div>
        </template>
      </el-tooltip>
      <el-tooltip
        content="点踩"
        placement="top"
        :offset="6"
        :open-delay="300"
      >
        <svg-icon
          icon-class="unlike"
          class="mr-10 cursor hover-opacity"
          :class="item.like_status === 'unlike' ? 'active' : ''"
          @click="handleLikeButton('unlike')"
        />
        <template slot="content">
          <div class="tooltip-content">点踩</div>
        </template>
      </el-tooltip>
      <el-tooltip v-if="isXz"
        content="投诉"
        placement="top"
        :offset="6"
        :open-delay="300"
      >
        <svg-icon
          icon-class="complaint"
          class="cursor hover-opacity"
          @click="handleComplaint()"
        />
        <template slot="content">
          <div class="tooltip-content">投诉</div>
        </template>
      </el-tooltip>
    </div>
    <span class="ml-a"></span>
    <span v-if="isTodoApp && !isTodo && item.status==='end'" class="todo-btn" @click="onTodo">
      <svg-icon iconClass="todo"></svg-icon>
      <i>生成待办</i>
    </span>
    <div v-if="item.brothers.length > 1" class="item-footer__mutiple">
      <svg-icon
        class="cursor"
        :class="item.renderIndex === 0 ? 'is-disabled mr-4' : 'mr-4'"
        icon-class="left-btn"
        @click="switchMessage(item, 'prev')"
      />
      <span>{{ item.renderIndex + 1 }} / {{ item.brothers.length }}</span>
      <svg-icon
        :class="item.renderIndex === item.brothers.length - 1 ? 'is-disabled' : ''"
        icon-class="right-btn"
        class="ml-4 cursor"
        @click="switchMessage(item, 'next')"
      />
    </div>
    <el-tooltip
      v-if="item.status!=='error'"
      content="复制"
      placement="top"
      :offset="6"
      :open-delay="300"
    >
      <svg-icon
        icon-class="copy-btn"
        class="fs-16 copy-btn cursor hover-opacity"
        @click="handleCopyBtn"
      />
      <template slot="content">
        <div class="tooltip-content">复制</div>
      </template>
    </el-tooltip>

    <template v-if="complaintParams">
      <complaint :visible.sync="isVisibleComplaint"
        :data="complaintParams" />
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { likeMessage } from '@/api/chat'
import { copyFunc } from '@/utils'
import complaint from './complaint'
export default {
  name: '',
  inject: ['sendMessage', 'switchMessage', 'likeStatus'],
  components: {
    complaint
  },
  data () {
    return {
      isVisibleComplaint: false,
      complaintParams: null
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    telport: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters(['chatStore', 'appInfo']),
    isXz () {
      return process.env.VUE_APP_NAME === 'xz'
    },
    isTodoApp () {
      return this.appInfo.appID === 111
    },
    isTodo () {
      return (this.item.business === '1' || this.item.target?.business === '1') || this.isChatDocument
    },
    isChatDocument () { return this.chatStore.docSummarize.status !== '' }
  },
  watch: {
    isVisibleComplaint (val) {
      if (!val) {
        setTimeout(() => {
          this.complaintParams = null
        }, 350)
      }
    }
  },
  methods: {
    async handleLikeButton (status) {
      const { data } = await likeMessage(this.chatStore.conversionId, this.item.message_id, status)
      if (data?.code === 200) {
        this.likeStatus(this.item.message_id, status)
      }
    },
    handleComplaint () {
      this.$xz('HtmlClickReport', { ReportID: 7642 })
      this.complaintParams = {
        conversionId: this.item.target?.conversation_id || this.chatStore.conversionId,
        messageId: this.item.message_id,
        model: this.item.model,
        content: this.item.target?.content
      }
      this.$nextTick(() => {
        this.isVisibleComplaint = true
      })
    },
    handleCopyBtn () {
      copyFunc(this.item.target.content)
    },
    onTodo () {
      this.$xz('HtmlClickReport', { ReportID: 7805 })
      this.sendMessage(this.item.target.content, null, {
        business: '1',
        noHistory: true,
        app_assistant_id: 489
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-footer__like {
  .svg-icon {
    font-size: 16px;
  }
  .active {
    color: #4087f3;
  }
}
.todo-btn{
  margin-right: 10px;
  cursor: pointer;
  user-select: none;
  color: #0CC18A;
  &:hover{
    i{
      text-decoration: underline;
    }
  }
  .svg-icon{
    margin-right: 4px;
    font-size: 16px;
  }
  i{
    font-style: normal;
    font-size: 12px;
    vertical-align: 0.05rem;
  }
}
.item-footer__mutiple {
  font-size: 13px;
  display: flex;
  align-items: center;
  .is-disabled {
    color: rgba($color: $color-white, $alpha: 0.3);
  }
}
</style>
